<template>
    <view class="container">
        <view class="thumb">
            <image
                :src="info.products.thumbs_text"
            />
        </view>

        <view class="info">
            <view class="validate">
                <view class="icon">
                    <image src="/static/images/validate_active.png"></image>
                </view>
                <view class="txt">
                    您查询的产品是官方正品!
                    <view>请放心使用！</view>
                </view>
            </view>

            <view class="line"></view>

            <view class="list">
                <view class="item">
                    <view class="name">
                        查询次数：
                    </view>
                    <view class="value">
                        {{ info.query_num }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        您查询的防伪码：
                    </view>
                    <view class="value">
                        {{ info.query_code }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        首次查询时间：
                    </view>
                    <view class="value">
                        {{ info.query_time_text }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        防伪码所属产品：
                    </view>
                    <view class="value">
                        {{ info.products.name }}
                    </view>
                </view>
            </view>

            <view class="code">
                <image
                    :src="info.query_qrcord_text"
                />
            </view>
        </view>
    </view>

    <!-- 消息提示 -->
    <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;
const code = ref('');
const info = ref({
    products:{}
});
const NoticeRef = ref(null);

onLoad((params) =>
{
    code.value = params?.code ? uni.$uv.trim(params.code) : '';

    GetInfoData();
});

const GetInfoData = async () =>
{
    const params = {
        code:code.value,
        busid:business.value.id
    }

    const result = await uni.$uv.http.post('/product/info',params);

    if(result.code === 1)
    {
        info.value = result.data;
    }else{
        NoticeRef.value.show({
            type:'error',
            message:result.msg,
            complete:() =>
            {
                uni.$uv.route({
                    type:'navigateBack'
                });
            }
        });

        return false;
    }
}

</script>

<style lang="scss">
@import '@/static/styles/theme.scss';

page {
    background-color: $bg-color;
    padding-bottom: 40rpx;
}

.container {
    @extend .page-container;
}

.thumb {
    width: 100%;
    height: 560rpx;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin-bottom: 30rpx;

    image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.info {
    @extend .card;
    padding: 0;

    .validate {
        display: flex;
        align-items: center;
        padding: 40rpx;
        background: linear-gradient(135deg, lighten($success-color, 35%) 0%, lighten($success-color, 42%) 100%);

        .icon {
            margin-right: 30rpx;

            image {
                width: 100rpx;
                height: 100rpx;
                filter: drop-shadow(0 2px 8px rgba($success-color, 0.3));
            }
        }

        .txt {
            font-size: 36rpx;
            font-weight: 600;
            color: $success-color;

            view {
                font-size: 28rpx;
                color: $text-secondary;
                margin-top: 12rpx;
                font-weight: normal;
            }
        }
    }

    .line {
        height: 2rpx;
        background: linear-gradient(to right, $border-color 0%, rgba($border-color, 0.3) 100%);
        margin: 0 40rpx;
    }

    .list {
        padding: 20rpx 40rpx;

        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24rpx 0;
            border-bottom: 1px solid $border-color;

            &:last-child {
                border-bottom: none;
            }

            .name {
                font-size: 28rpx;
                color: $text-secondary;
                font-weight: 500;
            }

            .value {
                font-size: 28rpx;
                color: $text-primary;
                font-weight: 600;
            }
        }
    }

    .code {
        width: 100%;
        height: 560rpx;
        padding: 40rpx;
        box-sizing: border-box;
        background: linear-gradient(135deg, $bg-color 0%, lighten($bg-color, 2%) 100%);

        image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }
    }
}
</style>